<script lang="ts" setup>
import useGet from "@/store/get";
import { ref, computed, watchEffect } from "vue";
//实例化store
const store = useGet();

const data = computed(() => {
  //无值返回undefined，有则返回
  return store.option?.single?.contact;
});
</script>

<template>
  <template v-if="data">
    <h2 class="presscontacts-headline">
      {{ data.title }}
    </h2>
    <div class="contacts-container">
      <div class="contactinfo" v-for="item in data.content">
        <p class="contactinfo-title">
          {{ item.title }}
        </p>
        <p class="contactinfo-text" v-html="item.content"></p>
      </div>
    </div>
  </template>
  <template v-else>
    <el-skeleton animated :throttle="500">
      <template #template>
        <h2 class="presscontacts-headline">
          <el-skeleton-item variant="h3" style="width: 35%" />
        </h2>
        <div class="contacts-container">
          <div class="contactinfo" v-for="item in 2" :key="item">
            <p class="contactinfo-title">
              <el-skeleton-item variant="h3" style="width: 35%" />
            </p>
            <p class="contactinfo-text">
              <el-skeleton-item variant="text" style="width: 55%" />
            </p>
          </div>
        </div>
      </template>
    </el-skeleton>
  </template>
</template>

<style lang="less" scoped>
.contacts-container {
  margin-top: -4px;
}

.presscontacts-headline {
  font-size: 24px;
  line-height: 1.16667;
  font-weight: 700;
  letter-spacing: 0.009em;
}
.contactinfo {
  font-size: 14px;
  line-height: 1.42859;
  font-weight: 500;
  letter-spacing: -0.016em;
  width: 326px;
  margin: 28px -4px 0 0;
  box-sizing: border-box;
  word-wrap: break-word;
  display: inline-block;
  vertical-align: top;
  padding-right: 20px;
}

.contactinfo-title {
  font-size: 19px;
  line-height: 1.21053;
  font-weight: 700;
  letter-spacing: 0.012em;
  margin-bottom: 3px;
}

.contactinfo-text {
  margin: 0;
}
@media only screen and (max-width: 1068px) {
  .contacts-container {
    margin-top: -12px;
  }

  .presscontacts-headline {
    font-size: 21px;
    line-height: 1.19048;
    font-weight: 700;
    letter-spacing: 0.011em;
  }
  .contactinfo {
    width: 288px;
  }
  .contactinfo-title {
    font-size: 17px;
    line-height: 1.23536;
    font-weight: 700;
  }
}
@media only screen and (max-width: 734px) {
  .contactinfo {
    width: 100%;
    margin: 28px 0 0;
  }
  .contacts-container {
    margin-top: 0px;
  }
}
</style>
